<template>
  <!-- 第一步  -->
  <div>
    <el-form
      ref="form"
      style="margin-top: 30px; margin-left: 60px"
      :model="courseInfo"
      label-width="80px"
    >
      <!-- 课程标题 -->
      <el-form-item label="课程标题">
        <el-input
          v-model="courseInfo.title"
          placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"
        ></el-input>
      </el-form-item>

      <!-- 课程讲师列表 -->
      <el-form-item label="课程讲师">
        <!-- value 双绑的id ; label 回显的内容 ; key 主键id -->
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="item in teachers"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 课程类别列表 -->
      <el-form-item label="课程类别">
        <!-- 一级分类 -->
        <!-- value 双绑的id ; label 回显的内容 ; key 主键id -->
        <el-select
          v-model="courseInfo.subjectParentId"
          @change="subjectChanged"
          placeholder="请选择"
        >
          <el-option
            v-for="item in subjects"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
        <!-- 二级分类  监听一级分类 -->
        <el-select v-model="courseInfo.subjectId" placeholder="请选择">
          <el-option
            v-for="item in subjectChildren"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 总课时 -->
      <el-form-item label="总课时">
        <el-input-number
          :min="0"
          v-model="courseInfo.lessonNum"
          controls-position="left"
          placeholder="请填写课程的总课时数"
        />
      </el-form-item>
      <!-- 课程简介 富文本编辑器 -->
      <el-form-item label="课程简介">
        <tinymce :height="200" v-model="courseInfo.description" />
      </el-form-item>
      <!-- 课程封面 -->
      <el-form-item label="课程封面">
        <!-- 上传组件 -->
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8120/admin/oss/file/upload?module=cover"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="courseInfo.cover" :src="courseInfo.cover" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <!-- 课程价格 -->
      <el-form-item label="课程价格">
        <el-input-number
          :min="0"
          v-model="courseInfo.price"
          controls-position="right"
          placeholder="免费课程请设置为0元"
        />
        &nbsp;元
      </el-form-item>
    </el-form>

    <div style="text-align: center">
      <el-button type="primary" @click="saveAndNext">保存并下一步</el-button>
    </div>
  </div>
</template>
<script>
import courseApi from "@/api/course";
import teacherApi from "@/api/teacher";
import subjectApi from "@/api/subject";
import Tinymce from "@/components/Tinymce";
export default {
  components: {
    Tinymce,
  },
  data() {
    return {
      subjectChildren: [],
      subjects: [],
      teachers: [],
      courseInfo: {
        //给JavaBean(course)提供默认值
        teacherId: "",
        subjectId: "",
        subjectParentId: "",
        title: "",
        price: "",
        lessonNum: "",
        cover: "",
        description: "",
      },
    };
  },
  created() {
    this.getTeacherList();
    this.getSubjectNestedList();
    if (this.$parent.courseId) {
      this.getCourseInfo();
    }
  },
  methods: {
    //查询回显的课程信息(页面生命周期重新加载时调用)
    getCourseInfo() {
      courseApi.courseInfo(this.$parent.courseId)
      .then((response) => {
        this.courseInfo = response.data.item;
        //获取一级课程分类
        let subjectParentId = this.courseInfo.subjectParentId
        //根据一级课程分类的id获取二级分类的集合,初始化subjectChildren
        this.subjectNestedList.forEach(subject=>{
          if(subject.id === subjectParentId){
            //找到了一级分类,对应的二级分类集合
            this.subjectChildren = subject.children
          }
        })
     });
    },
    //console.log("保存并下一步");
    saveAndNext() {
      //this.$parent.active = 1
      if (!this.$parent.courseId) {
        //新增课程
        courseApi.saveCourseInfo(this.courseInfo).then((response) => {
          this.$message.success("保存课程信息成功");
          //将保存课程信息成功的id交给父组件
          this.$parent.courseId = response.data.courseId;
          //提交保存数据的请求,后端响应成功跳转到下一个页面
          console.log(this.courseInfo);
          //this 代表Info的vue对象
          //this.$parent 代表获取Info的vue对象的父组件
          this.$parent.active = 1;
        });
      } else {
        //更新课程
        courseApi.updateCourseInfo(this.courseInfo,this.$parent.courseId)
        .then(response=>{
          //下一步
          this.$message.success("更新课程信息成功")
          this.$parent.active = 1
        })
      }
    },
    //查询讲师列表,回显下拉列表
    getTeacherList() {
      teacherApi.teacherList().then((response) => {
        this.teachers = response.data.items;
      });
    },
    //查询嵌套一级学科列表
    getSubjectNestedList() {
      subjectApi.subjectNestedList().then((response) => {
        this.subjects = response.data.items;
      });
    },
    //二级联动,监听一级分类标题
    subjectChanged() {
      //清空上一次一级分类的二级分类集合
      this.subjectChildren = [];
      this.courseInfo.subjectId = "";
      console.log(
        "一级分类的值改变了..subjectId " + this.courseInfo.subjectParentId
      );
      //获取一级分类的二级分类集合 赋值给二级分类的集合
      this.subjects.forEach((levelOneSubject) => {
        if (levelOneSubject.id === this.courseInfo.subjectParentId) {
          this.subjectChildren = levelOneSubject.children;
          return;
        }
      });
      console.log("获取到的二级分类集合: " + this.subjectChildren);
    },
    //上传成功
    handleAvatarSuccess(res, file) {
      //this.imageUrl = URL.createObjectURL(file.raw);
      this.courseInfo.cover = res.data.path;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style>
.tinymce-container {
  position: relative;
  line-height: normal;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>